<!-- 团期余位订单 -->
<template>
  <div class="group_remain_manager">
    <el-main class="base_main_content">
      <div class="base_screen_header">
        <BackTitleView title="团期列表" />
        <!-- <el-form :inline="true" class="base_search_form" @submit.prevent>
          <el-form-item>
            <el-select v-model="base" @change="searchBase" placeholder="请选择基地" clearable>
              <el-option v-for="(item, index) in baseOptions" :key="index" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
              </el-form> -->
      </div>
    
      <el-table :data="productData" border>
        <el-table-column v-for="(item, index) in productColumn" :key="index" :label="item.label" :prop="item.prop"
          :width="item.width" align="center" />
      </el-table>
      <div class="base_main_margin_top">
        <DataCollectTable :data="data" :total="total" :config="tableConfig" @operationsHander="opHander.receive">
        </DataCollectTable>
      </div>
    </el-main>
  </div>
</template>

<script setup>
import BackTitleView from "@com/BackTitleView.vue";
import DataCollectTable from '@com/table/DataCollectTable.vue'
import { OP_KEY, OPERATIONS, operationsHander } from "@com/table/tableOperations";
import { ref, reactive } from 'vue'
import { Search } from '@element-plus/icons-vue'
import useRoute from "@util/router";
import api from "@api/groupRemain"
import $ from "@util/base"
import { $msg } from '@/common/ui/msg';

const route = useRoute()

const baseOptions = ref([])

getConfig()
function getConfig() {
  api.base(val => {
    baseOptions.value = val
  })
}

const total = ref(0)
const data = ref([])
const base = ref(route.query().base || '')

function searchBase(val) {
  route.replaceQuery('base', val)
}

function getOperations(item) {
  var operation = []
  if ($.isNotEmpty(item.groupCode)) {
    operation = [OPERATIONS.registration, OPERATIONS.occupy, OPERATIONS.export]
    //关闭状态 1002001是 1002002否
    if (item.closeStatus == "1002001") {
      operation.push(OPERATIONS.openGroup)
    } else {
      operation.push(OPERATIONS.closeGroup)
    }
    return operation
  } else {
    //关闭状态 1002001是 1002002否
    if (item.closeStatus == "1002001") {
      operation.push(OPERATIONS.openGroup)
    } else {
      operation.push(OPERATIONS.closeGroup)
    }
    return operation
  }

}

const tableConfig = {
  showIndex: true,
  operations: null,
  column: [
    {
      label: '发团日期',
      prop: 'startGroupTime',
    }, {
      label: '套餐名称+团号',
      prop: 'nameAndCode',
    }, {
      label: '最大收客',
      prop: 'maxHoldVisitor',
      width: 100,
    }, {
      label: '未签/已签合同',
      prop: 'whetherSign',
      width: 150,
    }, {
      label: '未收款/已收款',
      prop: 'whetherReceived',
      width: 150,
    }, {
      label: '占位/已确认',
      prop: 'whetherHolder',
      width: 150,
    }, {
      label: '余位',
      prop: 'surplusSeat',
      width: 100,
    }, {
      label: '已成团/未成团',
      prop: 'isGroup',
      width: 150,
    }
  ]
}

const opHander = operationsHander();
opHander.install(OP_KEY.registration, (data) => {
  route.push({ name: 'registrationlist', query: { code: data.groupCode } })
});

opHander.install(OP_KEY.occupy, (data) => {
  route.push({ name: 'occupymanager', query: { code: data.groupCode, package: data.packageCode } })
});

opHander.install(OP_KEY.export, (data) => {
  api.registrationExport2(data.groupCode, (val) => {
    $.download(val.url, "报名情况导出");
  })
});

opHander.install(OP_KEY.closeGroup, (data) => {
  console.log(productData.value[0])
  api.groupRemainClose(data.startGroupTime, data.packageCode, productData.value[0].travelCode, true, () => {
    $msg.succ("关闭成功")
    getData()
  })

});
opHander.install(OP_KEY.openGroup, (data) => {
  api.groupRemainClose(data.startGroupTime, data.packageCode, productData.value[0].travelCode, false, () => {
    $msg.succ("打开成功")
    getData()
  })
});

const productData = ref([])

const productColumn = [
  {
    label: '产品名称',
    prop: 'travelName',
  }, {
    label: '产品编号',
    prop: 'travelCode',
    width: 150,
  }, {
    label: '现有团期',
    prop: 'nowGroupNum',
    width: 150,
  }, {
    label: '发团日期',
    prop: 'startGroupTime',
    width: 150,
  }, {
    label: '结束日期',
    prop: 'endGroupTime',
    width: 150,
  }, {
    label: '基地所属',
    prop: 'shopName',
    width: 150,
  }
]

getData()
route.watchRouter("travelstockdetails", () => { getData() })

function getData() {
  let routeQuery = route.query()
  api.orderList({
    shopCode: routeQuery.base,
    code: routeQuery.code,
    page: routeQuery.p,
    size: routeQuery.s
  }, val => {

    data.value = val.itemList.map(e => {
      // 套餐名称+团号
      e.nameAndCode = `${e.packageName ? e.packageName : '-'}/${e.groupCode}`
      // 未签/已签合同
      e.whetherSign = `${e.noSign}/${e.isSign}`
      // 未收款/已收款
      e.whetherReceived = `${e.uncollected}/${e.received}`
      // 占位/已确认
      e.whetherHolder = `${e.holder}/${e.isHolder}`
      return e
    })
    total.value = val.total
    productData.value = [val.productItem]
  })
}

function getExport() {
  let routeQuery = route.query()
  api.groupRemainExport({
    shopCode: routeQuery.base,
    code: routeQuery.code,
    page: routeQuery.p,
    size: routeQuery.s
  }, val => {
    $.download(val.url, "团期列表");
  })
}
</script>